import React from 'react';

const dragItemStyle = {
    height: '100%',
    backgroundColor: 'rgba(255, 162, 45, 0.3)'
};

const staticItemStyle = {
    height: '100%',
    backgroundColor: 'rgba(0, 0, 0, 0.2)'
};

const dotStyle = {
    width: 12,
    height: 12,
    borderRadius: '50%',
    background: '#fff',
    border: '1px solid #ffa22d',
    position: 'absolute'
};

const removeBtnStyle = {
    position: 'absolute',
    top: '50%',
    right: 40,
    transform: 'translateY(-50%)',
    cursor: 'pointer'
};

export const defaultDragItem = () => <div style={dragItemStyle}></div>;
export const defaultStaticItem = () => <div style={staticItemStyle}></div>;
export const defaultExpandUp = () => <div style={{ ...dotStyle, ...{ top: -6, left: 6 } }}></div>;
export const defaultExpandDown = () => <div style={{ ...dotStyle, ...{ bottom: -6, right: 6 } }}></div>;
export const defaultRemove = () => <div style={removeBtnStyle}>X</div>;
